<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="city" @keyup.enter='search'>
        <span @click="change('北京')">北京</span>
        <span @click="change('上海')">上海</span>
        <span @click="change('广州')">广州</span>
        <span @click="change('深圳')">深圳</span>
        <span @click="change('重庆')">重庆</span>
        <ul>
            <li v-for = "item in weatherList" >
                <h2>{{item.type}}</h2>
                <span>{{item.low}}</span>-<span>{{item.high}}</span>
                <h3>{{item.date}}</h3>
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               city:'' ,
               weatherList:[]
            },
            methods:{
                search:function(){
                    var that = this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
                    +this.city)
                    .then(function(resp){
                        console.log(resp)
                        that.weatherList = resp.data.data.forecast
                    })
                    .catch(function(err){})
                },
                change:function(city){
                    this.city = city;
                    this.search();
                }
            },
        })
    </script>
</body>
</html>